<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
    <style>
        .bottom-bar{
            position: static;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 60px;
            border-top: 1px solid #ccc;
            box-shadow: 0 0 8px #666;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
        }
        .bottom-bar > div{
            flex-grow: 1;
            text-align: center;
            cursor: pointer;
        }
        .bottom-bar > div:hover{
            color: orangered;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="bottom-bar">
            <div @click="changePage('HomePage')">首页</div>
            <div @click="changePage('ListPage')">列表</div>
            <div @click="changePage('CartPage')">购物车</div>
            <div @click="changePage('AboutPage')">关于我</div>
            <!-- 详情页在实际项目中 是不应该出现在导航上的 -->
            <div @click="changePage('DetailPage')">详情</div>

        </div>
        <pre v-pre class="note">
        动态组件 component 切换组件时，组件会不停进行创建和销毁操作;
            => 实际项目开发中会存在一些特定页面并不需要反复的创建和销毁；
            => 通过vue内置全局组件 keep-alive 进行动态组件包裹，实现组件缓存
            => 被 keep-alive 包裹的动态组件，在切换时会被阻止销毁操作
                + keep-alive 只会阻止组件销毁,被阻止销毁的组件实例会被记录在vue运行的内存中等待下一次的调用;
                + keep-alive 不会阻止组件容器从页面中删除的操作;
        
        keep-alive 组件缓存特性和配置
            + 该组件只会完成对包裹的动态组件进行缓存，但不会主动完成组件创建;
            + 组件第一次被访问时完成组件创建后，keep-alive才会完成该组件的缓存操作;
            + keep-alive 提供一个父向子传递的数据属性 max 用于设置最大缓存量【max未定义的情况下，取值为动态计算值-根据内存大小计算】;
                => 缓存组件一旦超过max设置的最大上限【包括在用组件】，最早被缓存的组件将会被销毁
                => 如果存在部分组件不需要被缓存或者需要被缓存，可以通过属性 exclude 或者 include 进行设置
                    + exclude 设置不需要被缓存的组件
                    + include 设置需要被缓存的组件
            + 在被缓存的组件中可以通过定义 activated deactivated 监控组件由缓存到显示，或者由显示到缓存的执行操作

        ** keep-alive 包裹动态组件后，调试工具可能无法准确识别组件名称，可以为组件提供 name 属性进行手动设置
        ** name 属性尽量保持和组件名称一致【涉及到递归组件的应用--模块化开发中讲解】
        </pre>
        <hr>
        <!-- <keep-alive :max="2">
            <component v-bind:is="page"></component>
        </keep-alive> -->

        <!-- <keep-alive exclude="DetailPage">
            <component v-bind:is="page"></component>
        </keep-alive> -->
        <!-- <keep-alive exclude="DetailPage,AboutPage">
            <component v-bind:is="page"></component>
        </keep-alive> -->

        <!-- <keep-alive :exclude="reg">
            <component v-bind:is="page"></component>
        </keep-alive> -->

        <keep-alive :exclude="arr">
            <component v-bind:is="page"></component>
        </keep-alive>
        <hr>
    </div>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        import HomePage from "./views/HomePage.js"
        import ListPage from "./views/ListPage.js"
        import CartPage from "./views/CartPage.js"
        import AboutPage from "./views/AboutPage.js"
        import DetailPage from "./views/DetailPage.js"


        createApp({
            components: {
                HomePage,ListPage,CartPage,AboutPage,DetailPage
            },
            data(){
                return {
                    page:"HomePage",
                    reg:/DetailPage|AboutPage/,
                    arr:["DetailPage","AboutPage"]
                }
            },
            methods: {
                changePage(page) {
                    this.page = page;
                    location.hash = page;
                }
            },
            created () {
                let page = location.hash.replace(/^#/,"")
                if(page!=""){
                    this.page = page
                }
            },
        }).mount("#app");
    </script>
</body>
</html>